<template>
    <div class="toast" ref="toast" >
        <!-- 登录成功显示绿色 :style="{ backgroundColor: true ? '#28a745' : '#dc3545' }-->
        <p ref="toast_message">欢迎{{ tenantName }}登录成功</p>
    </div>
</template>

<script>
export default {
    name:"Toast",
    data(){
        return{
            success:true,
            tenantName:""
        }
    },
    methods:{
        load(){
            const toast = this.$refs.toast  ;
            const toastMessage = this.$refs.toast_message;
            // console.log(toastMessage.innerHTML);
            if (this.success) {
                // toastMessage.innerHTML = "欢迎"+username;
                // toastMessage.innerHTML = "欢迎"+this.tenantName;
                // toastMessage.innerHTML += "登录成功";
                toast.style.backgroundColor ='#28a745'; // 绿色表示成功
            }
            toast.style.visibility = 'visible';
            setTimeout(function () {
                toast.style.visibility = 'hidden';
            }, 3000); // 3秒后隐藏
        },

    },
    watch:{
        tenantName:function(newVal){
            this.tenantName = newVal;
            this.load();
        }
    },
    mounted(){
        this.load();
    },
    props:["tenantName"]
}
</script>
<style scoped>
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    /* background-color:#dc3545; */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    animation: slideIn 0.5s forwards, slideOut 0.5s forwards 2.5s;
    visibility: hidden;
}
</style>